<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: solid 1px yellow;
            width: 150px;
            height: 150px;
            float: left;
        }
        .error{
            background-color: red;
        }
        .big{
            font-size: 20px;
        }
        .selected{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
       

    
    <div :class="{active: c1,error: seats.state==1, selected: seats.state==2}" @click="buy(i)" v-for="(seats, i) in seats" :key="seats">
         {{seats.id}} -
         {{seats.col}}
    </div>
    <br>
    总价<input type="text" :value="sum">
    <button @click="confirm()">购买</button>


    </div>
    <script src="/js/js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                c1:true,
                sum:0,
                seats:[
                    {id:1,row:1,col:1,price:50,state:0},
                    {id:2,row:1,col:2,price:20,state:0},
                    {id:3,row:1,col:3,price:30,state:0},
                    {id:4,row:1,col:4,price:30,state:1},
                    {id:5,row:1,col:5,price:40,state:1},
                    {id:6,row:1,col:6,price:20,state:0},
                ]
            },
            methods: {
                buy(i) {
                    // 如果座位可用，将其状态改为已选，否则将其状态改为可用
                    if (this.seats[i].state == 0) {
                        this.seats[i].state = 2;
                    } else if (this.seats[i].state == 2) {
                        this.seats[i].state = 0;
                    }
                    // 更新总价
                    this.sum = 0;
                    for (let seat of this.seats) {
                        if (seat.state == 2) {
                            this.sum += seat.price;
                        }
                    }
                },
                confirm() {
                    // 弹出确认框，显示已选座位的信息和总价
                    let message = "您已选择以下座位：\n";
                    for (let seat of this.seats) {
                        if (seat.state == 2) {
                            message += seat.id + " - " + seat.col + "\n";
                        }
                    }
                    message += "总价为：" + this.sum + "\n";
                    message += "是否确定购买？";
                    // 如果用户点击确定，将所有已选座位的状态改为不可用，否则不做任何改变
                    if (confirm(message)) {
                        for (let seat of this.seats) {
                            if (seat.state == 2) {
                                seat.state = 1;
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>
